<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>地理定位接口</title>
    <style>
        .de {
            width: 200px;
            height: 200px;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <div class="de"></div>
    <script>
        var oDiv = document.querySelector("div")
        function getLocation() {
            if (navigator.geolocation) {
                // successCallback 获取地理位置信息成功时的回调
                // errorCallback 获取地理位置信息失败时的回调
                // options 获取当前地理信息的方式
                // navigator.geolocation.getCurrentPosition(successCallback, errorCallback, options)
                navigator.geolocation.getCurrentPosition(showPosition, showError, {})
            } else {
                oDiv.innerHTML = "<h4>您的浏览器不支持定位</h4>"
            }
        }

        // 获取地理位置信息成功后回调
        // position.coords.latitude 纬度
        // location.coords.longitude 经度
        // location.coords.accuracy 精度
        // location.coords.altitude 海拔高度
        function showPosition(position) {
            oDiv.innerHTML = "Latitude: " + position.coords.latitude + "<br>Longitude: " +
                location.coords.longitude;
        }

        function showError(error) {
            console.log(error)
        }

        // 获取地理信息
        getLocation()
    </script>
</body>
</html>